import React, { Component, createRef } from "react";

// 非受控组件和受控组件一样是来获得input的内容的
// 可以使用createRef方法，配合ref属性，就可以拿到dom节点，从而获取到input的内容

class App extends Component {
  // state = {};
  // ipt = createRef();

  constructor() {
    super();

    this.state = {};
    this.ipt = createRef();
    this.ipt2 = createRef();
  }

  fn = () => {
    // console.log(this.ipt.current);
    console.log(this.ipt.current.value);
    console.log(this.ipt2.current.value);
  };

  render() {
    return (
      <>
        <h2>表单绑定-非受控组件</h2>
        {/* 对于非受控组件来说，需要使用defaultValue来设置初始值 */}
        <input type="text" ref={this.ipt} defaultValue={123} />
        <input type="text" ref={this.ipt2} />
        <button onClick={this.fn}>btn</button>
      </>
    );
  }
}

export default App;
